<template>
  <el-dialog
    :title="flowInfoModal.title"
    :visible.sync="flowInfoModal.show"
    center
    width="960px"
    :before-close="handleClose">
    <el-form :inline="true" :model="flowForm" label-width="140px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备编号">
            <el-input :disabled="isDisabled" v-model="flowForm.sourceId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备名称">
            <el-input :disabled="isDisabled" v-model="flowForm.eqptName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备类型一级">
            <el-select
              clearable
              filterable
              :disabled="isDisabled"
              v-model="flowForm.eqptParentTypeId"
              placeholder="设备二级类型">
                <el-option
                  v-for="item in deviceOneTypeList"
                  :key="item.typeId"
                  :label="item.typeName"
                  :value="item.typeId"
                ></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备类型二级">
            <el-select
              clearable
              filterable
              :disabled="isDisabled"
              v-model="flowForm.eqptTypeId"
              placeholder="设备二级类型">
                <el-option
                  v-for="item in deviceTwoTypeList"
                  :key="item.typeId"
                  :label="item.typeName"
                  :value="item.typeId"
                ></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备地点">
            <el-cascader
              :disabled="isDisabled"
              placeholder="请选择设备地点"
              v-model="flowForm.areaList"
              :options="eqptAddressData"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备标签">
            <select-tree
              :width="260"
              :isNodeParams="true"
              placeholder="请选择设备标签"
              v-model="flowForm.labelTree"
              :departments="eaptLabelTreeList"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="视频流HLS协议">
            <el-input v-model="flowForm.hlsFlow" clearable placeholder="请输入视频流HLS协议"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="视频流RTMP协议">
            <el-input v-model="flowForm.rtmpFlow" clearable placeholder="请输入视频流RTMP协议"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="视频流RTSP协议">
            <el-input v-model="flowForm.rtspFlow" clearable placeholder="请输入视频流RTSP协议"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import SelectTree from '@/components/selectTree'
import {
  getDeviceTypeList
} from '@/views/children/safety/js/device'
export default {
  components: { SelectTree },
  props: {
    flowInfoModal: {
      type: Object,
      default: () => ({})
    },
    eaptLabelTreeList: {
      type: Array,
      default: () => ([])
    },
    eqptAddressData: {
      type: Array,
      default: () => ([])
    }
  },
  computed: {
    isDisabled () {
      return this.flowInfoModal.title === '编辑视频流信息'
    }
  },
  data: () => ({
    flowForm: {
      eqptParentTypeId: '',
      eqptTypeId: '',
      areaList: [],
      eqptName: '',
      labelTree: [],
      hlsFlow: '',
      rtmpFlow: '',
      rtspFlow: ''
    },
    deviceOneTypeList: [],
    deviceTwoTypeList: []
  }),
  methods: {
    handleSure () {
      this.$emit('save', this.flowForm)
      this.handleClose()
    },
    handleClose () {
      this.$emit('close')
    },
    // 获取设备一/二级类型下拉列表数据
    async getDeviceTypeList (val, typeLevel) {
      try {
        const params = {
          typeLevel, // 类型名称
          typeParentId: val // 父类型id
        }
        let res = await getDeviceTypeList(params)
        if (res.code === 0) {
          typeLevel === 1 ? this.deviceOneTypeList = res.data : this.deviceTwoTypeList = res.data
        } else {
          this.$message.warning(res.msg)
        }
      } catch (e) {}
    }
  },
  mounted () {
    this.flowForm = { ...this.flowForm, ...this.flowInfoModal.row }
    this.getDeviceTypeList('', 1)// 设备类型一级
    if (this.flowForm.eqptParentTypeId) {
      this.getDeviceTypeList(this.flowForm.eqptParentTypeId, 2)// 设备类型二级
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content, .el-select, .el-cascader {
  width: 260px;
}
</style>
